<template>
  <div class="commentForm">
    <div class="inputBox">
      <input type="text" maxlength="15" placeholder="Name" v-model="forms.name" />
      <input type="text" maxlength="20" placeholder="Email" v-model="forms.email" />
    </div>
    <div class="replyName" v-if="isReply">
      <span>@{{ replyObj?.reply_name || "未知" }}</span>
      <span class="iconfont icon-guanbi"></span>
    </div>
    <textarea placeholder="What do you want to say..." v-model="forms.content"></textarea>
    <div class="bottom">
      <button type="button" class="btn" @click="submitComment">Submit</button>
      <div class="errorTips" v-if="code !== 200">
        <i class="iconfont icon-cuowu"></i>
        <span>{{ lint[code] }}</span>
      </div>
    </div>
  </div>
  <template v-if="comment?.total || 0 > 0">
    <h2>留言({{ comment?.total || 0 }})</h2>
    <div class="commentList">
      <div
        class="commentItem"
        v-for="item in comment.data"
        :key="item.id"
      >
				<div class="commentItemBox">
					<div class="head">
						<div class="avater">
							<img :src="item.avater" alt="">
						</div>
						<div class="userName">
							{{ item.name }}
						</div>
					</div>
					<div class="commentContent">

					</div>
				</div>
			</div>
    </div>
  </template>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRoute } from 'vue-router'
import { getComment, submitComments } from '../plugin/request'

export default {
  setup() {
    const state = reactive({
      isReply: false,
      comment: [],
      replyObj: {},
      forms: {
        name: '',
        email: '',
        content: ''
      },
      code: 200,
      isVerification: false,
      lint: [
        '名字是必填的喔~',
        '请输入正确的邮箱～',
        '不要什么都不说喔~'
      ]
    });
		const route = useRoute()
		const getComments = async () => {
			let params = {
				id: route.params?.id || -1
			}
			let data = await getComment(params)
			console.log(data);
		}
		onMounted(() => {
			getComments()
		})
    const submitComment = async () => {
      const map = {
        name: () => {
          return {
            code: 0,
            type: state.forms.name?.trim() || false
          }
        },
        email: () => {
          return {
            code: 1,
            type: /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(state.forms.email)
          }
        },
        content: () => {
          return {
            code: 2,
            type: state.forms.content?.trim() || false
          }
        }
      }
      for(let i in map) {
        const result = map[i]()
        if(!result.type) {
          state.code = result.code
          return
        }
      }
      let data = await submitComments(state.forms)
      console.log(data);
      //state.isVerification = true
    }
    return {
      ...toRefs(state),
      submitComment
    };
  },
};
</script>

<style lang="scss" scoped>
.commentForm {
  padding: 20px 20px 0 20px;
  border: 1px solid #000000;
  .inputBox {
    display: flex;
    input {
      flex: 1;
      height: 49px;
      border: none;
      outline: none;
      &:focus {
        border-bottom: 1px dashed #bdc3c7;
      }
    }
  }
  .replyName {
    color: #ffffff;
    background-color: #ffaf40;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
    .iconfont {
      font-size: 12px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  textarea {
    width: 100%;
    height: 300px;
    margin-top: 10px;
    outline: none;
  }
  .bottom {
    height: 49px;
    display: flex;
    align-items: center;
    .btn {
      cursor: pointer;
      outline: none;
      padding: 5px 10px;
      background-color: #ffffff;
      border-radius: 5px;
      border: none;
      background-color: #eaeaea;
      &:hover {
        background-color: #ffaf40;
        color: #ffffff;
      }
    }
    .errorTips{
      color: red;
      margin-left: 20px;
      font-size: 14px;
    }
  }
}
.commentList {
}
</style>
